<template>
  <view class="goods-list">
      <!-- 搜索框 -->
      <ugo-search></ugo-search>
      <!-- tabs组件 -->
      <u-tabs 
      :list="list" 
      :is-scroll="false" 
      :current="current" 
      @change="change"
      :bar-width="150"
      active-color="red"
      :active-item-style="{color:'black'}"
      >
      </u-tabs>
      <scroll-view 
      :refresher-triggered="refresherTriggered"
      scroll-y
      refresher-enabled
      @refresherrefresh="handleRefresherRefresh"
      @scrolltolower="handleScrollToLower"
      v-if="current === 0" class="goods-default"
      >
      <!-- <view v-if="current === 0" class="goods-default"> -->
          
          <!-- 商品列表 -->
          <view class="goods-item" v-for="item in goods" :key="item.goods_id">
              <navigator :url='"/pages/goods_detail/goods_detail?goods_id="+item.goods_id'>
                  <!--图片 -->
                  <view class="goods-item-img">
                    <u-image width="191rpx" height="191rpx" :src="item.goods_big_logo"></u-image>
                  </view>
                  <!-- 商品描述 -->
                  <view class="goods-item-desc">
                      <!-- 标题 -->
                      <view class="goods-item-desc-title u-line-2">{{item.goods_name}}</view>
                      <!-- 价格 -->
                      <view class="goods-item-desc-price">{{item.goods_price}}</view>
                  </view>
              </navigator>
          </view>
      <!-- </view> -->
      </scroll-view>
      <view v-else-if="current === 1">2</view>
      <view v-else-if="current === 2">3</view>
  </view>
</template>

<script>
export default {
    data() {
			return {
				list: [{
					name: '综合'
				}, {
					name: '销量'
				}, {
					name: '价格',
					count: 5
				}],
				current: 0,
                params:{
                    // 否	string	关键字
                    query:'',
                    // 否	string	分类id	
                    cid	:'',
                    // 否	number	页码
                    pagenum	:1,
                    // 否	number	页容量
                    pagesize:20	
                },
                goods:[],
                total:0,
                // 下拉状态默认false
                refresherTriggered: false,
			}
		},
		methods: {
			change(index) {
				this.current = index;
			},
            // 获取列表数据
            async getGoodsList(){
                const res = await this.$u.get('/goods/search',this.params)
                // console.log(55,res);
                // 方便新老数据合并，在上拉加载时候
                this.total  = res.message.total
                this.goods = [...this.goods,...res.message.goods]
            } ,


            // 下拉刷新触发事件（第二种方式）
            async handleRefresherRefresh(){
                // 下拉触发将下拉状态变为true
                this.refresherTriggered = true;
                 // 清除数据
                this.goods=[]
                 // 页码回到第一页
                this.params.pagenum = 1
                 // 重新获取数据
                await this.getGoodsList()
                 // 获取完数据就停止下拉刷新，将下拉状态改为false
                this.refresherTriggered = false
            },


            // 上拉加载第二页（第二种）
            handleScrollToLower(){
                // 判断还有没有下一页数据（那当前的数组长度和 总数据长度比较）
                // 1.没有，就提示用户
                 if(this.goods.length >= this.total){
                   uni.showToast({
                        title:'没有更多数据了',
                        icon:'none'
                })
                return
        }
            // 2.有
        // 2.1对页码参数++
        this.params.pagenum++
        console.log(this.params.pagenum);
        // 2.2重新发送请求
        // 2.3数据响应回来，对数组进行合并(在获取数据时候合并)
        this.getGoodsList() 
            }
		},

        // 获取传过来的id
    onLoad(option){
        console.log(option);
        this.params.cid = option.id || 5
        this.getGoodsList()
    },
    // 页面版上拉加载第二页（第一种）
    // onReachBottom(){
    //     // 判断还有没有下一页数据（那当前的数组长度和 总数据长度比较）
    //     // 1.没有，就提示用户
    //     if(this.goods.length >= this.total){
    //         uni.showToast({
    //             title:'没有更多数据了',
    //             icon:'none'
    //         })
    //         return
    //     }
    //         // 2.有
    //     // 2.1对页码参数++
    //     this.params.pagenum++
    //     console.log(this.params.pagenum);
    //     // 2.2重新发送请求
    //     // 2.3数据响应回来，对数组进行合并(在获取数据时候合并)
    //     this.getGoodsList() 
    //     },



    // 页面版下拉刷新页面（第一种）
    // async onPullDownRefresh(){
    //     // 清除数据
    //     this.goods=[]
    //     // 页码回到第一页
    //     this.params.pagenum = 1
    //     // 重新获取数据
    //     await this.getGoodsList()
    //     // 获取完数据就停止下拉刷新
    //     uni.stopPullDownRefresh()
    // }
}
</script>

<style lang="scss" scoped>
// 这两个样式时为了下拉刷新时候，刷新的位置在导航栏下面
.goods-list{
    height: 100vh;
    display: flex;
    flex-direction: column;
    // 让列表部分上下滚动时，不会带上导航栏
    .goods-default{
        flex: 1;
        overflow: auto;
    }
}



.goods-item {
    display: flex;
    flex-direction: column;
  navigator {
    display: flex;
    margin-top: 18rpx;
    border-bottom: 1px solid #ccc;
    .goods-item-img {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .goods-item-desc {
        flex: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
      .goods-item-desc-title {
            font-size: 28rpx;
      }

      .goods-item-desc-price {
color: $themeColor;
      }
    }
  }
}
</style>